<template>
  <div class="host-header">
    <div class="d-flex jc-center">
      <dv-decoration-10 class="dv-dec-10" />
      <div class="d-flex jc-center">
        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
        <div class="title">
          <span class="title-text">{{ TITLE }}</span>
          <dv-decoration-6
            class="dv-dec-6"
            :reverse="true"
            :color="['#50e3c2', '#67a1e5']"
          />
        </div>
        <dv-decoration-8
          class="dv-dec-8"
          :reverse="true"
          :color="decorationColors"
        />
      </div>
      <dv-decoration-10 class="dv-dec-10-s" />
    </div>

    <!-- 第二行 -->
    <div class="two-row">
      <span class="time">
        {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
        {{ timeInfo.dateDay }}
      </span>

      <span
        class="websocket-status"
        :class="{ connected: plcStore.isConnected }"
      >
        <i
          class="status-indicator"
          :class="{ connected: plcStore.isConnected }"
        ></i>
        {{ plcStore.isConnected ? "PLC 服务已连接" : "未连接" }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { TITLE, WEEK } from "@/constant/index";

import { usePlcStore } from "@/stores"; // 从统一导出的 stores 导入
// 使用 PLC store
const plcStore = usePlcStore();

const decorationColors = ["#568aea", "#000000"];
const timeInfo = reactive({
  setInterval: 0,
  dateDay: "",
  dateYear: "",
  dateWeek: "",
});

// 生命周期
onMounted(() => {
  // cancelLoading()
  handleTime();
  // todo 屏幕适应
  // windowDraw()
  // calcRate()
});

onUnmounted(() => {
  // unWindowDraw()
  clearInterval(timeInfo.setInterval);
});

// todo 处理时间监听
const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date();
    timeInfo.dateDay = formatTime(date, "HH: mm: ss");
    timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
    timeInfo.dateWeek = WEEK[date.getDay()];
  }, 1000);
};
</script>


<style lang="less" scoped>
.host-header {
  .dv-dec-10,
  .dv-dec-10-s {
    width: 30%;
    height: 5px;
  }

  .dv-dec-10-s {
    transform: rotateY(180deg);
  }

  .dv-dec-8 {
    width: 130px;
    height: 50px;
  }

  .title {
    position: relative;
    width: 500px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;

    .title-text {
      font-size: 24px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
    }

    .dv-dec-6 {
      position: absolute;
      bottom: -30px;
      left: 50%;
      width: 250px;
      height: 8px;
      transform: translate(-50%);
    }
  }

  // 第二行
  .aside-width {
    width: 40%;
  }

  .react-r-s,
  .react-l-s {
    background-color: #0f1325;
  }

  // 平行四边形
  .react-right {
    &.react-l-s {
      text-align: right;
      width: 500px;
    }

    font-size: 18px;
    width: 300px;
    line-height: 50px;
    text-align: center;
    transform: skewX(-45deg);

    .react-after {
      position: absolute;
      right: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(45deg);
    }

    .text {
      display: inline-block;
      transform: skewX(45deg);
    }
  }

  .react-left {
    &.react-l-s {
      width: 500px;
      text-align: left;
    }

    font-size: 18px;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transform: skewX(45deg);
    background-color: #0f1325;

    .react-before {
      position: absolute;
      left: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(-45deg);
    }

    .text {
      display: inline-block;
      transform: skewX(-45deg);
    }
  }

  .body-box {
    margin-top: 16px;
    display: flex;
    flex-direction: column;

    //下方区域的布局
    .content-box {
      display: grid;
      grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
    }

    // 底部数据
    .bototm-box {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, 50%);
    }
  }

  // 第二行时间行
  .two-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;

    .time {
      font-size: 16px;
      color: #fff;
    }

    .websocket-status {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #ff4d4f; // 未连接时的红色
      white-space: nowrap;
      margin-right:20px;

      &.connected {
        color: #52c41a; // 连接时的绿色
      }

      .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ff4d4f;
        margin-right: 6px;

        &.connected {
          background-color: #52c41a;
          box-shadow: 0 0 4px #52c41a;
        }
      }
    }
  }
}
</style>